<!--
 * @Author: Shber
 * @Date: 2024-07-08 17:03:31
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-10 17:59:44
 * @Description: 
-->
<template>
  <view>
    <Map/>
    <view class="contain_box">
      <!-- operate -->
      <view class="top_btn_group">
        <text class="top_status" v-if="false">待发货</text>
        <view class="top_status" v-else>
          <text>已发货</text>
          <text class="delivey_track" @click="onTrack">配送追踪</text>
        </view>
        <view class="courier">
          <view class="courier_info">
            <text class="courier_name">[自配送] 王二狗</text>
            <text class="courier_phone">13623455432</text>
          </view>
          <tm-button size="small" :shadow="0" outlined :round="25" label="联系骑手"></tm-button>
        </view>
        <view class="flex_y_center mt_5">
          <tm-button class="mr_10" :shadow="0" outlined :round="25" label="修改订单"></tm-button>
          <tm-button class="mr_10" :shadow="0" outlined :round="25" label="打印"></tm-button>
          <tm-button :shadow="0" :round="25" label="发货"></tm-button>
        </view>
      </view>

      <view class="mt_10 delivey_info">
        <view class="item_top">
          <view class="flex_y_center flex_y_center1">
            <my-icon :fontSize="72" color="#78ADC5" name="myicon-waimai-e630"/>
            <view class="ml_5">
              <text class="top_p1">同城配送</text>
              <text class="top_p2">立即送达</text>    
            </view>
          </view>
        </view>
        <view class="white_card">
          <text class="info_title">收货信息</text>
          <view class="info_txt mt_10"><text class="txt_1">收货人：</text>王二狗</view>
          <view class="info_txt mt_10"><text class="txt_1">收货地址：</text>北京市北京市顺义区空港街道千里马国际大厦千里马国际605</view>
          <view class="info_txt mt_10"><text class="txt_1">手机：</text>
            <view class="call_phone"><text>17689077645</text> 
              <tm-icon :font-size="40"  color="#999999" name="tmicon-phone-fill "></tm-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="white_card mt_10">
        <text class="info_title">订单商品</text>
        <OrderGoodsItem class="mt_10" v-for="item in 3"/>
        <view class="amount_to">
          <text>运费：¥24.00</text>
          <text>实付款：<text class="big_num">¥24.00</text></text>
        </view>
      </view>

      <view class="white_card mt_10 mb_20">
        <view class="info_txt mt_10"><text class="txt_1">订单号：</text>403958630946843905e68540</view>
        <view class="info_txt mt_10"><text class="txt_1">订单备注：</text>我是订单备注</view>
        <view class="info_txt mt_10"><text class="txt_1">下单时间：</text>2023-11-17 17:24:13</view>
        <view class="info_txt mt_10"><text class="txt_1">交易快照：</text>
          <view class="call_phone" @click="goPath('/pages/order/snapshotList')"><text style="color: #999999;">发生交易争议时，可作为判断依据</text> 
            <tm-icon :font-size="24"  color="#999999" name="tmicon-angle-right"></tm-icon>
          </view>
        </view>
      </view>
    </view>

    <my-popup v-model="popupShow" :is-mask-click="false">
      <view style="padding: 10px;">
        <view class="white_card">待发货发货</view>
      </view>
    </my-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Map from './components/Map.vue'
import myIcon from '@/components/MyIcon/index.vue'
import myPopup from '@/components/MyPopup/index.vue'

import OrderGoodsItem from './components/OrderGoodsItem.vue'

const popupShow = ref(false)
const onTrack = ()=>{
  popupShow.value = true 
  // popup.value.open()
}
const goPath = (_url)=>{
  uni.navigateTo({url:_url})
}
</script>

<style scoped lang="scss">
.contain_box{
  position: relative;
  margin-top: -40px;
  padding: 0 10px;
}
.mr_10{margin-right: 10px !important;}
.top_btn_group{padding: 10px 16px; background-color: #fff; border-radius: 4px;}
.flex_y_center{display: flex; align-items: center; justify-content: space-between;}
.top_status{display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 500; color: #333333; padding: 10px 0; border-bottom: 1px solid #efefef;}
.delivey_track{font-size: 12px;color: #2DAED6;font-weight: normal;}
.item_top{
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: #E5F4FB;
  padding: 8px 15px;
}
.top_p1{color: #333333; font-size: 14px; font-weight: 400; display: flex;}
.top_p2{color: #999999; font-size: 12px;}
.flex_y_center1{align-items: flex-start;}
.delivey_info{background-color: #fff; border-radius: 4px; overflow: hidden; color: #333333;}
.info_title{font-size: 16px; font-weight: 500;}
.info_txt{font-size: 12px; display: flex;}
.txt_1{width: 60px; flex-shrink: 0;}
.call_phone{flex: 1; display: flex; justify-content: space-between;}
.amount_to{display: flex; justify-content: space-between; align-items: center; font-size: 12px;
  font-weight: 500; color: #3D3D3D; margin-top: 16px;}
  .big_num{font-size: 18px;}
.courier{display: flex; padding: 10px 0; border-bottom: 1px solid #efefef;}
.courier_info{
  flex: 1;
  background: url('../../static/logo.png') no-repeat left center;
  background-size: 40px 40px;
  padding-left: 50px;
  font-size: 12px; color: #999;
  .courier_name{display: block; font-size: 14px; color: #333; margin-top: 5px;}
}
</style>
<style>
page{background-color: #f8f8f9;}
</style>